<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>HOJ后台管理</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="../js/jquery-3.3.1.min.js"></script>
  <script src="./js/controller.js"></script>
  <script src="./js/myajax.js"></script>
  <script src="./js/filter.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">HOJ后台管理</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"><a href="/front/index">返回主页</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li id="tab1" class="layui-nav-item">
          <a href="javascript:;">页面管理</a>
          <dl class="layui-nav-child">
            <dd id="tab1-1"><a href="./index">主页信息</a></dd>
            <dd><a href="javascript:;">bala bala</a></dd>
          </dl>
        </li>
        <li id="tab2" class="layui-nav-item">
          <a href="javascript:;">用户管理</a>
          <dl class="layui-nav-child">
            <dd id="tab2-1"><a href="./userList">用户概览</a></dd>
            <dd id="tab2-2"><a href="./code">代码查看</a></dd>
          </dl>
        </li>
        <li id="tab3" class="layui-nav-item">
          <a href="javascript:;">题目管理</a>
          <dl class="layui-nav-child">
            <dd id="tab3-1"><a href="./problemList">题目概览</a></dd>
            <dd id="tab3-2"><a href="./addProblem">添加题目</a></dd>
          </dl>
        </li>
        <li id="tab4" class="layui-nav-item">
          <a href="javascript:;">比赛管理</a>
          <dl class="layui-nav-child">
            <dd id="tab4-1"><a href="./contestList">比赛概览</a></dd>
            <dd id="tab4-2"><a href="./addContest">添加比赛</a></dd>
            <dd id="tab4-3"><a href="./contestUser">用户总览</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <table id="demo" lay-filter="test"></table>
      <script type="text/html" id="switchTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="isShow" value="{{d.problemId}}" lay-skin="switch" lay-text="是|否" lay-filter="isShowDemo" {{d.isShow==true? 'checked':''}}>
      </script>
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      </script>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © Hunan University Online Judge
  </div>
</div>
<script src="./layui/layui.js"></script>
<script>
  //JavaScript代码区域
  layui.use('element', function(){
    var element = layui.element;
  });
  var tab = document.getElementById("tab3");
  tab.className += "  layui-nav-itemed";
  var tab_t = document.getElementById("tab3-1");
  tab_t.className += " layui-this";

  layui.use('table', function(){
    var table = layui.table;
    var form = layui.form;
    var token = null;
    if (localStorage.getItem(tokenName) != null) {
      token = localStorage.getItem(tokenName).toString();
    }
    //第一个实例
    table.render({
      elem: '#demo',
      // height: 688,
      url: ojurl + "/admin/problem/list", //数据接口
      page: true, //开启分页
      limit: 15,
      limits: [10,15,30,50],
      headers: {"token" : token},
      parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.count, //解析数据长度
          "data": res.data.list //解析数据列表
        };
      },
      response: {
        statusCode: 200 //规定成功的状态码，默认：0
      },
      cols: [[ //表头
        {field: 'problemId', width: 80, title: 'ID', sort: true, fixed: 'left'},
        {field: 'title', title: '标题', width: 180},
        {field: 'source', title: '来源', width: 180, sort: true},
        {field: 'author', title: '作者', width: 180},
        {field: 'docType', title: '题面方式', width: 90},
        {field: 'timeLimit', title: '时限(S)', width: 90},
        {field: 'timeLimitSpc', title: '特别时限(S)', width: 110},
        {field: 'memoryLimit', title: '内存限制(M)', width: 110},
        {field: 'dataVersion', title: '评测数据版本', width: 120},
        {field: 'accepts', title: '通过数', width: 90},
        {field: 'ratio', title: '通过率', width: 90},
        {field: 'isSpj', title: '是否特判', width: 90},
        {field: 'addTime', title: '题目添加时间', width: 180},
        {field: 'judgeFiles', title: '评测数据组数', width: 120},
        {field: 'isShow', title: '是否公开', width: 90, templet: '#switchTpl', fixed: 'right'},
        {width: 70, templet: '#barDemo', fixed: 'right'}
      ]]
    });

    //监听题目是否公开操作
    form.on('switch(isShowDemo)', function(obj){
      var jsonData = new Object();
      jsonData.problemId = String(obj.value);
      jsonData.isShow = (obj.elem.checked==true? "1" : "0");
      var data = new Object();
      data.data = jsonData;
      $.ajax({
        type: "POST",
        url : ojurl + "/admin/problem/show",
        dataType: "json",
        contentType: "application/json",
        timeout: 10000,
        data: JSON.stringify(data),
        beforeSend: function(request) {
            if (localStorage.getItem("token") != null) {
                request.setRequestHeader(tokenName, localStorage.getItem("token").toString());
            }
        },
        success: function(result) {
          if (result.code == HttpStatus.SUCCESS) {
            layer.alert("题目 " + obj.value + " 的显示状态已改为: " + obj.elem.checked);
          }
          else {
            layer.alert("修改失败</br>" + result.message);
          }
        }
      })
    });

    //监听工具条
    table.on('tool(test)', function(obj){
      var data = obj.data;
      delete data.addTime;
      delete data.dataVersion;
      delete data.accepts;
      delete data.isShow;
      delete data.ratio;
      layer.confirm('进入题目 ' + data.problemId +' 的编辑页面', function(){
        location.href = "./updateProblem?problemId=" + data.problemId;
        sessionStorage.setItem("updateProblem", JSON.stringify(data));
      });
    });
    
  });
</script>
</body>
</html>